<template>
  <div>
    <jy-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-table border stripe ref="tableRef" v-loading="loading" :data="dataList"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="50px" :selectable="rowSelectable" />
        <el-table-column label="序号" align="center" width="50px" type="index" />
        <el-table-column label="工序名称" align="center" prop="name" />
        <el-table-column label="文件类型" align="center" prop="fileType" min-width="180" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </jy-dialog>
  </div>
</template>
<script>
import { listBsProcess } from "@/api/pl/bsProcess";
import { listBsProcessInspection, addBatchBsProcessInspection, updateBsProcessInspection } from "@/api/pl/bsProcessInspection";

export default {
  name: 'gx-add',
  props: {
    zdId: {
      type: [String, Number],
      default: undefined
    }
  },
  data () {
    return {
      open: false,
      title: '关联工序',
      loading: false,
      buttonLoading: false,
      dataList: [],
      selectedData: [],
      selectedIds: [], // 前期关联项
    };
  },
  created () {
  },
  mounted () {
  },
  methods: {
    async init (fbfxId) {
      this.reset();
      this.form.zdId = this.zdId;
      this.form.fbfxId = fbfxId;// 分部分项id
      // 获取工序列表
      const defaultArray = await this.getProcessList();
      const defaultIds = defaultArray.map(item => item.id);
      // 查询已关联项
      const relevanceIds = await this.getProcessInspectionList();
      this.selectedIds = [...defaultIds, ...relevanceIds];
      this.open = true;

      if (relevanceIds.length == 0) {
        this.$nextTick(() => {
          defaultArray.forEach(item => {
            if (this.$refs.tableRef) {
              this.$refs.tableRef.toggleRowSelection(item);
            }
          });
        });
      }
    },
    async getProcessList () {
      // this.loading = true;
      const queryParams = {
        enabled: 1,// 启用
        pageNum: 1,
        pageSize: 1000,
      };
      const { rows } = await listBsProcess(queryParams);
      this.dataList = rows;
      return rows.slice(0, 6);
      // listBsProcess(queryParams).then(response => {
      //   this.dataList = response.rows;
      //   this.loading = false;
      //   this.dataList.forEach((item, index) => {
      //     if (index < 6) {
      //       this.$refs.multipleTable.toggleRowSelection(item);
      //     }
      //   });
      // });
    },
    // 查询已关联项
    async getProcessInspectionList () {
      const queryParams = {
        fbfxId: this.form.fbfxId,
        pageNum: 1,
        pageSize: 1000,
      };
      const { rows } = await listBsProcessInspection(queryParams);
      return rows.map(item => item.processId);
      //  listBsProcessInspection(queryParams).then(response => {
      //   const data = response.rows;
      //   this.selectedIds = data.map(item => item.processId);
      // });
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.selectedData = selection;
    },
    // 判断是否禁选
    rowSelectable (row, index) {
      return !this.selectedIds.includes(row.id);
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        fbfxId: undefined,
        zdId: undefined,
        processList: []
      };
      this.dataList = [];
      this.selectedData = [];
    },
    /** 提交按钮 */
    submitForm () {
      if (this.selectedData.length == 0) {
        this.$message.warning('请选择工序！');
        return;
      }
      const info = {
        fbfxId: this.form.fbfxId,
        zdId: this.form.zdId,
        processList: this.selectedData
      };
      this.buttonLoading = true;
      addBatchBsProcessInspection(info).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.cancel();
        this.$emit('callBack');
      }).finally(() => {
        this.buttonLoading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
